<%@ include file="../common/IncludeTop.jsp"%>
<script type="text/javascript" src="./JS/jquery-3.5.1.js"></script>
<script>
	let xhr;
	function checkUsername(){
		let username = document.getElementById("username").value;
		if(username.trim()=="")
		{
			let msg = document.getElementById('isExistInfo');
			msg.classList.remove('okmsg');
			msg.innerText = '';
		}
		else
		{
			xhr = new XMLHttpRequest();
			xhr.onreadystatechange = process;
			xhr.open("GET", "usernameIsExist?username="+username, true);
			xhr.send(null);
		}
	}
	function process(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				let responseInfo = xhr.responseText;
				let msg = document.getElementById('isExistInfo');
				if(responseInfo == "Exist"){
					msg.classList.remove('okmsg');
					msg.classList.add('errormsg');
					msg.innerText = 'Not available';
				}else if(responseInfo == "Not Exist"){
					msg.classList.remove('errormsg');
					msg.classList.add('okmsg');
					msg.innerText = 'Available';
				}
			}
		}
	}
	function PSW(){
		let psw = document.getElementById("password").value.trim();
		let msg = document.getElementById('pswStrength');
		if(psw=="")
		{
			msg.className = 'errormsg';
			msg.innerText = "Please put in your password!";
		}
		else if(psw.search(/\d/)!=-1)
		{
			if(psw.search(/[a-z]/i)!=-1)
			{
				msg.className = 'okmsg';
				msg.innerText = "PasswordStrength: High";
			}
			else
			{
				msg.className = 'okmsg';
				msg.innerText = "PasswordStrength: Low";
			}
		}
	}

	function RPSW()
	{
		let psw = document.getElementById("password").value.trim();
		let rpsw = document.getElementById("repeatedPassword").value.trim();
		let msg = document.getElementById('rpsw');
		if(psw!==rpsw)
		{
			msg.className = 'errormsg';
			msg.innerText = "Two input password must be consistent";
		}
		else
		{
			msg.className = 'okmsg';
			msg.innerText = "Password OK";
		}
	}
</script>
<div id="Catalog">
	<form action="register" method="post">

	<h3>User Information</h3>

	<table>
		<tr>
			<td>User ID:</td>
			<td><label>
				<input type="text" name="username" id = "username" onkeyup = "checkUsername();" required/><br/>
				<span id = "isExistInfo">
				</span><br/>
			</label></td>
		</tr>
		<tr>
			<td>New password:</td>
			<td><label>
				<input type="text" name="password" id="password" onkeyup="PSW()" required/> <br>
				<span id = "pswStrength"></span><br/>
			</label></td>
		</tr>
		<tr>
			<td>Repeat password:</td>
			<td><label>
				<input type="text" name="repeatedPassword" id="repeatedPassword" onkeyup="RPSW()" required/><br>
				<span id = "rpsw"></span><br/>
			</label></td>
		</tr>
	</table>

	<%@ include file="IncludeAccountFields.jsp"%>

	<input type="submit" name="newAccount" value="Save Account Information" />

</form></div>

<%@ include file="../common/IncludeBottom.jsp"%>